4.1 React.js with Node.js

• Single page or cross-platform application development
• Data visualization tools
• Social networks
• Web apps
• Messaging apps
• Blogs (Personal or professional)

• Easy to learn and use: Developers familiar with JavaScript can learn to use React in a matter of days. 69.7% of developers prefer JavaScript based frameworks over other programming languages.
• Virtual Document Object Model (DOM): The tree-like structure of an HTML program is known as DOM. The users' actions on a website trigger an update that rewrites the entire DOM, requiring more resources. A virtual DOM works more efficiently because it changes only the elements that need manipulation.
• Requires less coding: Easy to create highly functional web UIs
• Reusability: React has reusable HTML codes that make a developer's life quite easy. It is easier to make and maintain web UIs because of this feature.
• Downward data flow: React framework's data flow is relatively simple. It has a straightforward downward data flow that is easy to track and work with.

• Continuous updates: Developers have to constantly re-learn new ways of coding because web UI the framework changes at a very rapid pace.
• Poor documentation: The extension libraries are not efficiently updated by the supporting community.
• JSX complications: React uses syntax that is a combination of HTML and JavaScript. It has a steep learning curve and is difficult for amateur developers to work with.

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="like_button_container">
</div>
<!-- Load our React component. -->
<script src="like_button.js"></script>

<!-- like_button.js
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {  // props: object for attribute properties
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    // JS
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
    /* or
    // JSX
    //   What do you think is returned?
    return (
      <button onClick={() => this.setState({ liked: true })}>
        Like
      </button>  // Is it a string value? What is it?
    );
    */
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);  // It is the main idea.
-->

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="like_button_container_jsx"></div>
<!-- Load our React component. -->
<script type="text/babel" src="like_button_jsx.js"><!-- See the above code for this example. -->

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id='hello-world-container'></div>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,  // ?
      document.getElementById('hello-world-container')
    );
</script>

• React directly in HTML with Babel, or
• Setting up a React environment so that JSX can be executed at the server side
  • $ npx create-react-app my-react-app
    You might see multiple "WARN"s and "ERR"s. Just continue the next steps.
  • $ cd my-react-app
  • Insert your port number in package.json:
    "start": "react-scripts start" -> "start": "PORT=yourport react-scripts start"
  • $ npm start
    If you saw this error - "Can't resolve web-vitals ...", then $ npm i web-vitals --save-dev and start,
    If you saw "sh: 1: react-scripts: Permission denied", then try $ chmod +x node_modules/.bin/react-scripts and start, and
    try to start the app again.
    You will see "Compiled successfuly".
  • You can access http://cs.tru.ca:yourportnumber on your web browser. Try it!
    How to stop? ^C.
  • Trial 0. Connect to cs.tru.ca with your account, and try to complete the actions in the above.
  • Modify the React application: src -> App.js
  • Later, $ npm run build. See the last subsection.

• Here it an example of .map(), arrow function, and template literal.

  const data = ['apple', 'banana', 'orange'];
  const list = data.map((item) => `<li>${item}</li>`);
  //const list = data.map(function(item) { return `<li>${item}</li>`; });
  alert(list);
  

• Try this for React and .map()!
• Trial 1. Let's try the above code.
  <div id='tr1-list'></div> <div id='tr1-list-react'></div> <script> const data = ['apple', 'banana', 'orange']; const list = data.???((item) => `<li>????</li>`); // using a template literal document.getElementById('tr1-list').innerHTML = '<ul>' + list[0] + list[1] + list[2] + '</ul>'; </script> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const myArray = ['apple', 'banana', 'orange']; const myList = myArray.???((item) => <li>{item}</li>); // What is <li>{item}</li>? ReactDOM.render(myList, document.getElementById('tr1-list-react')); </script> Try this exercise with runcode

• Can you explain what the basic idea of React.js is?
• Questions:
  • Q1. How to make a group of HTML elements?
  • Q2. Templating?
  • Q3. How to support events?
  • Q4. How to support 'state', i.e., internal data, so that multiple subgroups can be bound to the data?

• A group of HTML elements that include JavaScript templating with { ... }.
• A tree like structure of HTML elements and components
• Closing tags are required.
• className is used instead of class in a start tag.
• onEventname is used instead of oneventname in a start tag. E.g., onClick
• For example,

  const myelement = <h1>I Love JSX {5 + 5} times!</h1>;  // It is an example of JSX. One top level HTML element.
  const myAnoterhExample = (
      <>
          <hr />
          <h1 className='test'>I Love JSX {5 + 5} times!</h1>
      </>
  )
  ReactDOM.render(myelement, document.getElementById('root'));
  

• Components are like functions that return a group of HTML elements that can be rendered in ReactDOM.
• Two types: class components, and function components

  <ComponentName [attr=value ...] />
  

• Components can be nested.
• Let's study the next Trial closely.
• Trial 2.1 Let's try use a function component that returns the next HTML element

  <h2>What a great day!</h2>
  

  <div id='tr2-1-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function Weather1() { // Should start with an uppercase letter return ????; } ????(<Weather1 />, document.getElementById('tr2-1-root')); </script> Try this exercise with runcode
• Trial 2.2 Let's try use two function components. One component is used in another one. The two components also use a parameter for the object of attributes.
  <button id='tr2-2-check'>Check weather!</button> <div id='tr2-2-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function Weather2(props) { // props: object for attribute properties return <h2>What a {props.islike2} day!</h2>; } function Weather3(propsss) { return ( ??? ???? {/* for the above component, <Weather2 />; how to pass an attribute? */} <hr/> <h2>What a {propsss.islike} day!</h2> ??? ) } document.getElementById('tr2-2-check').addEventListener('click', function() { let data = 'nice'; ????(<??? islike=???? ???, document.getElementById('tr2-2-root')); }); </script> Try this exercise with runcode
• In the above two Trials, what questions that we raised before are answered?
  • Q1
  • Q2
    • { ... } within JSX code in a component
    • How can data be passed to a component?
      ReactDOM.render(<Weather islike='nice' />, document.getElementById('tr2-root3'));
let data=...; ReactDOM.render(<Weather attrname={data} />, document.getElementById('tr2-root3'));
    • A object can be passed as an attribute (or called property). E.g., data={ {name:"John", age:23} }
• Trial 3. Let's try to use a class component.
  <div id='tr3-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> class Weather extends React.Component { // Should start with an uppercase letter constructor(props) { // props: object for attribute properties super(props); } render(props) { return ( ??? <hr ???> <h2>What a {this.props.islike} day!</h2> ??? ) } } ????(??? islike='wonderful' ???, document.getElementById('tr3-root')); </script> Try this exercise with runcode
• How to resolve Q3 and Q4?

• Trial 4.1 Let's try to include event handling code into a component.
  <div id='tr4-1-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function ButtonTR41() { const readTR41 = () => { alert(????); // Read the input value and print it. } return ( <> <input id="tr4-1-input" /> <button ????>Read!</button> </> ) } ReactDOM.render(????, document.getElementById('tr4-1-root')); </script> Try this exercise with runcode
• Trial 4.2 Let's try to include event handling code into a component.
  <div id='tr4-2-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const readTR42 = () => { alert(????); // Read the input value and print it. } function ButtonTR42() { return ( <> <input id="tr4-2-input" /> <button ????>Read!</button> {/* read <input> and pass it to readTR42() */} </> ) } ReactDOM.render(????, document.getElementById('tr4-2-root')); </script> Try this exercise with runcode
• Trial 4.3 Let's try to include event handling code into a component.
  <div id='tr4-3-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function ButtonTR43() { const readTR43 = (message) => { // To be called from the event listener on the next button alert(message); } return ( <> <input id="tr4-3-input" /> <button ????>Read!</button> </> ) } ReactDOM.render(????, document.getElementById('tr4-3-root')); </script> Try this exercise with runcode


• Trial 5. Let's try to include 'a variable in closure' into a component. Is the input value printed in <p>? What do you have to do? Data-view binding?
  <div id='tr5-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function ButtonTR5() { let data = "Message here!"; const readTR5 = (message) => { // To be called from the event listener on the next button alert(message); data = message; // Will data be bound to the <p> below? } return ( <> <input id="tr5-input" /> <button ???={ (eObj) => { readTR5(document.getElementById("tr5-input").value); } }>Read!</button> <p>{ data }</p> {/* maybe another component */} </> ) } ReactDOM.render(<ButtonTR5 />, document.getElementById('tr5-root')); </script> Try this exercise with runcode
• How to resolve Q4?

• Hooks allow function components to have access to state, and because of this, class components are generally no longer needed.
• Requirements: Only inside React function components; At the top level of a component; Not be conditional
• Trial 6. Let's try to include a stateHook into a component.
  <div id='tr6-root'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const { useState } = React; // It is a bit different when we use Node.js on the server side. function ButtonTR6() { const [data, setDataaa] = ???("Message here!"); const [data2, setData2] = ???("2nd message here!"); const readTR6 = (message) => { // To be called from the event listener on the next button alert(message); // data = message; // Not this way!!! ????; // Will data be bound to the <p> below? // How? } return ( <> <input id="tr6-input" /> <button onClick={ () => { readTR6(document.getElementById("tr6-input").value); } }>Read!</button> <p>{ data }, {data2}</p> {/* maybe another component */} </> ) } ReactDOM.render(<ButtonTR6 />, document.getElementById('tr6-root')); </script> Try this exercise with runcode
• Note that only when state data is changed, related components will be re-rendered. What if state data is an array or object and an element or a property is changed? The answer is no, because the state data has a reference value and the reference value would not be changed. For example,

  {data, setData} = useState([0, 1, 2, 3]);
  ...
  data[2] = 22;
  setData(data);  // It won't work.
  ...
  let tmpData = [];
  for (let i = 0; i < data.length; i++) tmpData[i] = data[i];
  setData(tmpData);  // It will work.
  data = tmpData;
  

• Did you finish Trial 0? Please complete it!
• ES modules are supprted.
• Directories and files in my-react-app: [from Trial 6]
  • public/
    • index.html - a template that includes

      <div id='root'>
      

    • ...
  • src/
    • index.js - JavaScript code to support JSX code

      import React, { useState } from "react";
      import ReactDOM from "react-dom/client";
      import "./index.css";  // Check this out!
      import App from "./App.js";
      
      const root = ReactDOM.createRoot(document.getElementById('root));
      root.render(<App />);
      

    • index.css

    body {
        margin:5px;
    }
    

    • App.js

      import "./App.css";
      import { useState } from "react";
      
      const App = () {  // From Trial 6
          const [data, setDataaa] = useState("Message here!");
          const readTR6 = (message) => {    // To be called from the event listener on the next button
              alert(message);
              // data = message;  // Not this way!!!
              setDataaa(message);  // Will data be bound to the <p> in the below?
                                   // How?
          }
          return (
              <>
                  <input id="tr6-input" />
                  <button onClick={ () => {
                          readTR6(document.getElementById("tr6-input").value);
                      }
                  }>Read!</button>
                  <p>{ data }</p>  {/* maybe another component */}
              </>
          )
      }
      
      export default App;
      

    • App.css

      p {
          font-size:40px;
          background-color:Cyan;
      }
      

    • ...
• Trial 7. After update the above files, in my-react-app, execute $ npm start
  How to test? (Note that you need to use your port number in package.json.)

• Include "homepage" in "package.json".

  {
    "homepage":"https://servername/...",
    "name": "my-react",
    "version": "0.1.0",
    "private": true,
    ...
  }
  // or (This could be better. Let's use this.)
  {
    "homepage":".",
    "name": "my-react",
    "version": "0.1.0",
    "private": true,
    ...
  }
  

• $ npm run build
  If you saw "sh: 1: react-scripts: Permission denied", then try $ chmod +x node_modules/.bin/react-scripts and rebuild.
• $ cp -r build/* ~/public_html/react-app
• $ find ~/public_html/react-app -type d -exec chmod 711 {} \;
• $ find ~/public_html/react-app -type f -exec chmod 644 {} \;